<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>所有作品</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="static/css/style.css">
    <style>
        .layui-table-cell {
            height: auto;
        }
        .active{
            border:3px solid yellow!important
        }
    </style>
</head>
<body>
<div class="container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>玩家列表</legend>
    </fieldset>
    <form class="layui-form" >
        <table class="layui-hide"  id="test"></table>
        <script src="layui/layui.js" charset="utf-8"></script>
        <table id="demo" lay-data="{height: 'full-200', cellMinWidth: 80}"  lay-filter="test"></table>
        <div id="test1"></div>
        <div class="container">
            <div class="layui-form-item">
                <button type="button" class="layui-btn" id="update">刷新</button>
            </div>
            <div class="layui-form" >
                <table id="brands" class="layui-table containers">
                </table>
            </div>
        </div>
        <script type="text/html" id="showbrand">
            <img data-id="-1" class="choic " onclick='test(this)' src= 'http://127.0.0.1/Reputation_PK/img/01.png' width='41px' height='51px'>
            <img data-id="-1" class="choic " onclick='test(this)' src= 'http://127.0.0.1/Reputation_PK/img/02.png' width='41px' height='51px'>
            <img data-id="-1" class="choic " onclick='test(this)' src= 'http://127.0.0.1/Reputation_PK/img/03.png' width='41px' height='51px'>
            <img data-id="-1" class="choic " onclick='test(this)' src= 'http://127.0.0.1/Reputation_PK/img/04.png' width='41px' height='51px'>
            <img data-id="-1" class="choic " onclick='test(this)' src= 'http://127.0.0.1/Reputation_PK/img/05.png' width='41px' height='51px'>
        </script>
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script src="js/common.js"></script>
        <script src="layui/layui.js"></script>
        <script src="layer-v3.1.1/layer/mobile/layer.js"></script>
        <script type="text/html" id="barDemo1">
            <a class="layui-btn layui-btn-xs" lay-event="updatebrand">修改</a>
        </script>
        <script>
            var lock=false
            function test (el) {
                lock=true
                $(".choic").removeClass("active")
                $(el).addClass("active")
            }
            var list;
            var userType;
            var vip;
            var laypage;
            $(function() {
                layui.use(['form', 'laypage'], function() {
                    var form = layui.form;
                    laypage = layui.laypage;
                    userlist();
                })
            })
            $("#update").click(function() {
                window.location.reload();
            })
            function userlist() {
                var roomo=localStorage.getItem("roomo")
                $.ajax({
                    type: "POST", //提交方式
                    url: baseurl + "/backuser", //路径
                    dataType: 'json',
                    data: {
                        roomo:roomo,
                        back:"getrecorduser"
                    }, //数据，这里使用的是Json格式进行传输
                    success: function(data) { //返回数据根据结果进行相应的处理
                        setBrand(data.brands)
                        list = data.list;
                        layui.use('table', function() {

                            var table = layui.table;
                            //第一个实例
                            table.render({
                                elem: '#demo',
                                id: 'testReload',
                                data: list, //数据接口
                                cols: [
                                    [{
                                        field: 'userid',
                                        title: '玩家ID',
                                        width: 75
                                    }, {
                                        field: 'nickname',
                                        title: '玩家名称',
                                        width: 102
                                    }, {
                                        field: 'brand',
                                        title: '玩家当前手中的牌',
                                        width: 247
                                    }, {
                                        field: 'game_number',
                                        title: '局数',
                                        width: 80
                                    }, {
                                        field: 'updatebrand',
                                        title: '可修改的牌',
                                        width: 241,
                                        toolbar: '#showbrand'
                                    }, {
                                        title: '操作',
                                        width: 91,
                                        align: 'center',
                                        toolbar: '#barDemo1'
                                    }]
                                ]
                            });
                            table.on('tool(test)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                                var data = obj.data; //获得当前行数据
                                console.log(data)
                                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                                var tr = obj.tr; //获得当前行 tr 的DOM对象
                                /* var brand=obj.parents().prev().find("img") */
                                var brand=tr.find(".layui-table-cell").find("img")
                                var list=""
                                for(var i=0;i<brand.length;i++){
                                    if(i==4){
                                        list+=brand.eq(i).attr("data-id")
                                    }else{
                                        list+=brand.eq(i).attr("data-id")+","
                                    }
                                }
                                if(layEvent === 'updatebrand') {
                                    var userid=data.userid;
                                    var roomo=localStorage.getItem("roomo")
                                    $.ajax({
                                        type: "post", //提交方式
                                        url: baseurl + "/backuser", //路径
                                        dataType: 'json',
                                        data: {
                                            back:"updatebrand",
                                            roomo:roomo,
                                            userid:userid,
                                            brandslist:list
                                        }, //数据，这里使用的是Json格式进行传输
                                        success: function(data) {
                                            if(data.state == 200) {
                                                layer.msg("修改成功!");
                                            }
                                        }
                                    })
                                }
                            });
                        });
                    }
                });
            }
            //加载剩余的牌
            function setBrand(brands){
                var indexs = brands.split("-");
                for(var i=0;i<indexs.length;i++){
                    var html = "<img id='"+indexs[i]+"'  onclick='onkey("+indexs[i]+")' src='"+baseurl+"/img/"+indexs[i]+".png' width='40px' height='50px' />"
                    $("#brands").html($("#brands").html()+html);
                }
            }
            function onkey(index){

                var roomo=localStorage.getItem("roomo")
                $(".active").attr("src","http://127.0.0.1/Reputation_PK/img/"+index+".png")
                $(".active").attr("data-id",index)
                if(lock){
                    $("#"+index).remove()
                }

            }
        </script>
</body>
</html>